<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Tag</title>
    <!-- Bootstrap -->
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link href="assets/css/bootstrap-tag.css" rel="stylesheet">
    <link href="http://twitter.github.com/bootstrap/assets/css/docs.css" rel="stylesheet">
    <link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet">
    
    <style type="text/css">
        .prettyprint .tag {
          background: none;
          display: inline;
          font-weight: normal;
          line-height: auto;
          margin: 0;
          padding: 2px 4px;
          text-shadow: 0 1px 0 #fff;
        }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <section id="tag">
          <div class="page-header">
            <h1>Tag <small>bootstrap-tag.js</small></h1>
          </div>
          <h2>Example</h2>
          <p>A basic plugin for quickly creating elegant tag inputs with any form text input.</p>
          <div class="bs-docs-example" style="background-color: #f5f5f5;">
            <input type="text" name="tags" value="One, Five" data-provide="tag">
          </div>
          <pre class="prettyprint linenums">&lt;input type="text" name="tags" data-provide="tag"&gt;</pre>
          <hr class="bs-docs-separator">
          <h2>Usage</h2>
          <h3>Via data attributes</h3>
          <p>Activate a modal without writing JavaScript. Set <code>data-provides="tag"</code> on a text input element and it'll be converted into a tag input.</p>
          <pre class="prettyprint linenums">&lt;input type="text" name="tags" data-provide="tag"&gt;</pre>
          <h3>Via JavaScript</h3>
          <p>Call a tag input with id <code>myInput</code> with a single line of JavaScript:</p>
          <pre class="prettyprint linenums">$('#myInput').tag(options)</pre>
          <h3>Options</h3>
          <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-caseInsensitive="true"</code>.</p>
          <table class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>Name</th>
                <th>Type</th>
                <th>Default</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>caseInsensitive</td>
                <td>boolean</td>
                <td>true</td>
                <td>Case insensitive search</td>
              </tr>
              <tr>
                <td>allowDuplicates</td>
                <td>boolean</td>
                <td>false</td>
                <td>Allows duplicates</td>
              </tr>
              <tr>
                <td>source</td>
                <td>array, function</td>
                <td>[]</td>
                <td>The data source to query against. May be an array of strings or a function. The function is passed two arguments, the <code>query</code> value in the input field and the <code>process</code> callback. The function may be used synchronously by returning the data source directly or asynchronously via the <code>process</code> callback's single argument.</td>
              </tr>
            </tbody>
          </table>
          <h3>Methods</h3>
          <h4>.tag(options)</h4>
          <p>Initializes an input with tags.</p>
        </section>
      </div>
    </div>
    <!-- Bootstrap -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
    <script src="../js/bootstrap-tag.js"></script>
    <script>
        !function ($) {
            $(function() {
                window.prettyPrint && prettyPrint()
            })
        }(window.jQuery)
    </script>
  </body>
</html>